<#include "../base.ftl"/>

<#macro title>
    List 代码生成器
</#macro>

<#macro cssfile>
<link
    href="libs/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" rel="stylesheet">
</#macro>    

<#macro scriptfile>
<!-- 代码显示用 -->
<script type="text/javascript" src="libs/dp.SyntaxHighlighter/Scripts/shCore.js"></script>  
<script type="text/javascript" src="libs/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="libs/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script type="text/javascript" src="libs/dp.SyntaxHighlighter/Scripts/shBrushSql.js"></script>
<script type="text/javascript" src="libs/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>

</#macro>

<#macro breadcrumb>
    <ul class="breadcrumb">
     <li><a href="index.html">Home</a> <span class="divider">/</span></li>
     <li class="active">List生成</li>
    </ul>
</#macro>

<#macro main>
    <div class="row-fluid">
    <section id="listAssistant">
        <!-- 左侧 -->
        <div class="span5">
            <p class="docs-lead">提供List代码的生成。包括：list.yaml内容，jqGrid的基本代码</p>
    
            <form id="listAssistant-form">
                <label>列表名称 (yaml中的ListName,jqGrid中的caption) </label> <input
                    id="listName" name="listName" type="text" placeholder="请输入列表名称">
                <label>Tag名称 (yaml中的Tag名称) </label> <input
                    id="TagName" name="TagName" type="text" placeholder="请输入Tag名称">
                <label>查询语句</label>
                <textarea id="listSql" name="listSql" placeholder="请输入查询语句"
                    rows="10" class="field span8"></textarea>
                <p>
                    <button id="listparser" class="btn btn-primary" type="button">解析</button>
                </p>
            </form>
        </div>
    
        <!-- 右侧 -->
        <div class="span5">
            <form id="listAssistant-parser">
                <label>select:</label>
                <textarea id="listSelect" name="listSelect" rows="3"
                    class="field span12" ></textarea>
                <label>from:</label>
                <textarea id="listFrom" name="listFrom" rows="3"
                    class="field span12" ></textarea>
                <label>where:</label>
                <textarea id="listWhere" name="listWhere" rows="3"
                    class="field span12" ></textarea>
                <label>groupby:</label>
                <textarea id="listGroupby" name="listGroupby" rows="3"
                    class="field span12" ></textarea>
                <label>orderby:</label>
                <textarea id="listOrderby" name="listOrderby" rows="3"
                    class="field span12" ></textarea>
            </form>
        </div>
    
        <!-- 需要填写的表信息 -->
        <div class="span10">
            <div class="page-header">
                <h3>生成字段定义</h3>
            </div>
            <table id="gridTable"></table>
            <div id="gridPager"></div>
            <p>
                <button id="listGen" class="btn btn-primary" type="button">生成代码</button>
            </p>
        </div>
    
        <!-- 输出结果 -->
        <div class="span10">
            <div class="page-header">
                <h3>Yaml Code</h3>
            </div>
            <div class="dp-highlighter" id="yamlCode">
            </div>
            <div class="page-header">
                <h3>JqGrid Code</h3>
            </div>
            <div class="dp-highlighter" id="jqGridCode">
            </div>
        </div>
    </section>
    </div>
</#macro>

<#macro jsscript>
    //解析sql
    $("#listparser")
            .click(
                    function() {
                        var url = "codeAssistant!parserSql.action";
                        var params = {
                            "listSql" : $("#listSql").val()
                        };
                        $.post(url, params, function(data, status) {
                            $("#listSelect").val(data.select);
                            $("#listFrom").val(data.from);
                            $("#listWhere").val(data.where);
                            $("#listGroupby").val(data.groupby);
                            $("#listOrderby").val(data.orderby);
                            //填充数据
                            fillData(data.columns);
                            //刷新本地数据
                            reloadGrid();
                        }, "json");
                    });

    //生成list代码
    $("#listGen").click(function() {
        //先校验
        if (vaildateListData()) {
            //提交后台生成代码
            var param = {
                    listName : $('#listName').val(),
                    select : $('#listSelect').val(),
                    from : $('#listFrom').val(),
                    where : $('#listWhere').val(),
                    groupby : $("#listGroupby").val(),
                    orderby : $("#listOrderby").val(),
                    tagName : $("#TagName").val(),
                    rowData : getListGridData()
            };
            
            var postData = {
                "listData" : JSON.stringify(param)
            }
            
            var url = "codeAssistant!genListCode.action";
            $.post(url, postData, function(data, status) {
                $("#yamlCode").html('<pre name="code" class="sql">' + data.yaml + '</pre>');
                $("#jqGridCode").html('<pre name="code" class="js">' + data.grid + '</pre>');
                //$('#yamlCode').text(data.yaml);
                //$('#jqGridCode').text(data.grid);
                dp.SyntaxHighlighter.ClipboardSwf = 'libs/dp.SyntaxHighlighter/Scripts/clipboard.swf';  
                dp.SyntaxHighlighter.HighlightAll('code');  
            }, "json");
            
        }
    });
    
    
    function getListGridData(){
        var rowCount = $("#gridTable").getGridParam("reccount");
        var gridData = [];
        for ( var i = 0; i < rowCount; i++) {
            var rowData = $("#gridTable").jqGrid("getRowData", tableData[i].id);
            gridData.push(rowData);
        }
        return gridData;
    }

    function vaildateListData() {
        var hasPk = false;
        var rowCount = $("#gridTable").getGridParam("reccount");

        for ( var i = 0; i < rowCount; i++) {
            var rowData = $("#gridTable").jqGrid("getRowData", tableData[i].id);

            if (rowData.displayName == "") {
                showMsg('显示名称没有填写', 'error');
                return false;
            }

            if (rowData.columnPK == "true") {
                if (!hasPk) {
                    hasPk = true;
                } else {
                    showMsg('只可以有一个主键', 'error');
                    return false;
                }
            }
        }

        if (!hasPk) {
            showMsg('必须有一个主键', 'error');
            return false;
        }

        if ($("#listName").val() == "") {
            showMsg('必须填写列表名称');
            return false;
        }
        
        if($("#TagName").val() == ""){
            showMsg('必须填写Tag名称');
            return false;
        }

        return true;
    }

    var tableData = [];

    function reloadGrid() {
        $("#gridTable").setGridParam({
            'data' : tableData
        }).trigger("reloadGrid");
    }

    jQuery(document).ready(function() {
        var lastsel;
        $("#gridTable").jqGrid({
            data : tableData,
            datatype : "local",
            height : 250,
            rowNum : 20,
            colNames : [ 'id', '字段名称', '显示名称', '字段类型','隐藏','编辑','查询', '导出', '主键' ],
            colModel : [ {
                name : 'id',
                index : 'id',
                hidden : true,
                editable : false
            }, {
                name : 'columnName',
                index : 'columName',
                editable : false
            }, {
                name : 'displayName',
                index : 'displayName',
                editable : true,
                editoptions : {
                    size : "20",
                    maxlength : "20",
                    //自定义CSS
                    dataInit : function(elem) {
                        $(elem).addClass('input-small');
                    }
                }
            }, {
                name : 'columnType',
                index : 'columnType',
                editable : true,
                formatter : 'select',
                edittype : 'select',
                editoptions : {
                    value : "VarChar:VarChar;Date:Date;Number:Number",
                    //自定义CSS
                    dataInit : function(elem) {
                        $(elem).addClass('input-small');
                    }
                }
            }, {
                name : 'columnHid',
                index : 'columnHid',
                editable : true,
                edittype : "checkbox",
                editoptions : {
                    value : "true:false"
                }
            }, {
                name : 'columnEdit',
                index : 'columnEdit',
                editable : true,
                edittype : "checkbox",
                editoptions : {
                    value : "true:false"
                }
            }, {
                name : 'columnSearch',
                index : 'columnSearch',
                editable : true,
                edittype : "checkbox",
                editoptions : {
                    value : "true:false"
                }
            }, {
                name : 'columnExport',
                index : 'columnExport',
                editable : true,
                edittype : "checkbox",
                editoptions : {
                    value : "true:false"
                }
            }, {
                name : 'columnPK',
                index : 'columnPK',
                editable : true,
                edittype : "checkbox",
                editoptions : {
                    value : "true:false"
                }
            } ],
            pager : "#gridPager",
            caption : "查询字段列表",
            viewrecords : true,
            gridview : true,
            autowidth : true,
            editurl : "",
            onSelectRow : function(id) {
                if (id && id !== lastsel) {
                    //保持数据
                    jQuery('#gridTable').saveRow(lastsel);

                    jQuery('#gridTable').editRow(id, true);
                    lastsel = id;
                    $('#gridTable').jqGrid('editRow', id, {
                        keys : true, //这里按[enter]保存  
                        restoreAfterError : true,
                        oneditfunc : function(rowid) {
                            jQuery('#gridTable').saveRow(lastsel);
                        },
                        succesfunc : function(response) {
                            reloadGrid();
                            return true;
                        },
                        errorfunc : function(rowid, res) {
                            console.log(rowid);
                            console.log(res);
                        }
                    });
                }
            }
        });
    });

    function fillData(data) {
        tableData = [];
        $.each(data, function(i) {
            tableData.push({
                id : data[i],
                columnName : data[i],
                displayName : "",
                columnType : "VarChar",
                columnSearch : "true",
                columnHid : "false",
                columnEdit : "true",
                columnExport : "true",
                columnPK : "false"
            });
        });
    }
</#macro>